<!DOCTYPE html>
<html>
<head>
	<style>
    body {
			margin:0px;
			padding:0px;
    }
    ul {			
			margin:0;
			padding:0;
			list-style-type:none;
			background-color:#ff0000;
    }
    li,a{
			float:left;
			/**
      display:inline-block; 这样会占据整行，从背景颜色可以看出来 */
			margin:0px;
			width:150px;
			background-color:#FF0;
		}
    a:link,a:visited {
			font-weight:bold;
			color:#FFFFFF;
			background-color:#98bf21;
			text-align:center;
			padding:10px;
			text-decoration:none;
			text-transform:uppercase;
    }
    a:hover,a:active {
      background-color:#7A991A;
    }
		li.dividerH {
			border-left-style:solid;
			border-left-color:#00F;
			border-left-width:1px
		}
    </style>
</head>

<body>
    <ul>
        <li><a href="#home">Home</a></li>
        <li class="dividerH"><a href="#news">News</a></li>
        <li class="dividerH"><a href="#contact">Contact</a></li>
        <li class="dividerH"><a href="#about">About</a></li>
    </ul>

</body>
</html>	